/**
 * 档案借阅----借阅申请
 */
import React from "react";
import PropTypes from "prop-types";
import { routerRedux, Redirect } from "dva/router";
import { connect } from "dva";
import { Row, Col, Button, Table } from "antd";
import {
  filterState,
  filterBorrowState,
  filterMediumType,
  filterRenew,
  filterReturnResult
} from "utils/filter";
import { formatDate } from "utils";
import Modal from "./Modal";

const MyApplication = ({ location, dispatch, loading, borrow }) => {
  const {
    list,
    pagination,
    info,
    showDetails,
    showBorrowModal,
    currentItem,
  } = borrow;
  const columns = [
    {
      title: "档案年度",
      key: "documentYear",
      dataIndex: "documentYear"
    },
    {
      title: "公证事项",
      key: "notarialMatters",
      dataIndex: "notarialMatters",
      render: (text, record) => {
        const datas = text.split("#")
        const ary = []
        datas.map((item, i) => {
          ary.push(
            <p>{item}</p>
          )
        })
        return ary
      }
    },
    {
      title: "申请人",
      key: "applyName",
      dataIndex: "applyName",
      render: (text, record) => {
        const datas = text.split("#")
        const ary = []
        datas.map((item, i) => {
          ary.push(
            <p>{item}</p>
          )
        })
        return ary
      }
    },
    {
      title: "借阅方式",
      key: "borrowMediumType",
      dataIndex: "borrowMediumType",
      render: (record, text) => filterMediumType(record)
    },
    {
      title: "申请提交日期",
      key: "borrowApplyTime",
      dataIndex: "borrowApplyTime",
      render: (record, text, index) => formatDate(record)
    },
    {
      title: "借阅时间",
      key: "state",
      render: (record, text) => {
        return (
          <div>
            {formatDate(record.borrowStartTime)}
            <span>——</span>
            {formatDate(record.borrowEndTime)}
          </div>
        );
      }
    },
    {
      title: "审批结果",
      key: "borrowResult",
      dataIndex: "borrowResult",
      render: (record, text, index) => filterBorrowState(record)
    },
    {
      title: "是否续借",
      key: "renew",
      dataIndex: "renew",
      render: (record, text, index) => {
        return <div>{record == 1 ? "是" : "否"}</div>;
      }
    },
    {
      title: "申请审批人",
      key: "borrowAuditorName",
      dataIndex: "borrowAuditorName",
      render: (record, text) => {
        return <div>{record ? <span>{record}</span> : <span>暂无</span>}</div>;
      }
    },
    {
      title: "是否归还",
      key: "borrowState",
      dataIndex: "borrowState",
      render: (record, text) => {
        return (
          <div>
            {record == 4 ? (
              <span>已归还</span>
            ) : record == 0 || record == 2 ? (
              <span>无</span>
            ) : (
              <span>未归还</span>
            )}
          </div>
        );
      }
    },
    {
      title: "操作",
      key: "operation",
      render: (record, text, index) => {
        const { borrowState } = record;
        if (borrowState == 1) {
          return (
            <div>
              <a onClick={() => showDetail(record.id)}>查看</a>

              {record.renew != undefined ? (
                ""
              ) : (
                <a
                  style={{ marginLeft: 10 }}
                  onClick={() => borrowAgian(record)}
                >
                  申请续借
                </a>
              )}

              <a style={{ marginLeft: 10 }} onClick={() => getSliderDetails(record)}>审核详情</a>
            </div>
          );
        } else {
          // return <span style={{ color: "#e5e5e5" }}>查看</span>;
          return <a style={{ marginLeft: 10 }} onClick={() => getSliderDetails(record)}>审核详情</a>;
        }
      }
    }
  ];
  const borrowAgian = record => {
    dispatch({
      type: "borrow/borrowAgian",
      payload: record
    });
  };
  const showDetail = record => {
    dispatch({
      type: "borrow/showDetails",
      payload: record
    });
  };
  const getWorkHistory = payload => {
    dispatch({
      type:"borrow/getworkflowHistory",
      payload:{processInstanceId:payload.processInstanceId}
    })
  }
  const getSliderDetails = record =>{
    getWorkHistory(record)
    dispatch({
      type:"borrow/getSliderDetails",
      payload:{record}
    })
    $("#sliderDetails").animate({ right: "0" });
  };
  const tabProps = {
    loading:loading.effects['borrow/query'],
    dataSource: list,
    pagination,
    columns,
    onChange(page) {
      dispatch({
        type: "borrow/query",
        payload: { page: page.current, pageSize: page.pageSize }
      });
    }
  };
  const hideModal = () => {
    dispatch({
      type: "borrow/hideBorrowAgain"
    });
  };
  const handleOk = value => {
    dispatch({
      type: "borrow/borrowAgainApply",
      payload: { ...value }
    });
  };
  const modalProps = {
    title: "续借申请",
    visible: showBorrowModal,
    onOk: handleOk,
    onCancel: hideModal,
    currentItem
  };

  return (
    <div>
      <Table {...tabProps} />
      {showBorrowModal && <Modal {...modalProps} />}
    </div>
  );
};

MyApplication.propTypes = {
  location: PropTypes.object,
  borrow: PropTypes.object,
  dispatch: PropTypes.func,
  loading: PropTypes.object
};

export default connect(({ loading, borrow }) => ({ loading, borrow }))(
  MyApplication
);
